<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">审核中</block>
		</cu-custom>

		<scroll-view scroll-x class="bg-white nav text-center" :style="{top:CustomBar+'px'}">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in navList" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{ item.name }}
			</view>
		</scroll-view>

		<!-- 卡片 -->
		<view class="cu-card case" v-for="(item,index) in navList[TabCur].list" :key="index">
			<view class="cu-item shadow">
				<view class="image " @click="toNav('/pages/goods/adopt?post_id=' + item.post_id)">
                    <view class="end" v-if=" item.pickup_user_id && item.pickup_id">已领养</view>
					<image :src="item.imageArray[0]" mode="widthFix"></image>
					<view class="cu-tag bg-blue" v-if="item.type == 1">领养</view>
					<view class="cu-tag bg-blue" v-if="item.type == 2">救助</view>
					<view class="cu-tag bg-blue" v-if="item.type == 3">丢失</view>
					<view class="cu-tag bg-blue" v-if="item.type == 4">帮助</view>
					<view class="cu-bar bg-shadeBottom">
						<text class="text-cut">{{ item.content }}</text>
						<!-- <text class="text-cut">{{ item.city }}</text> -->
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="text-gray text-sm flex justify-between solid-bottom padding">
						<view class="text-gray text-sm">
							<text class="cuIcon-attentionfill margin-lr-xs"></text> {{ item.view }}
						</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{ item.like.number }}
						</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-messagefill margin-lr-xs"></text> {{ item.replies }}
						</view>
					</view>

					<view class="padding flex justify-between align-center solid-bottom" v-if="item.type == 1">
						<view class="flex align-center">
							<!-- <view class="cu-avatar-group" style="position: relative;">
                                <view class="cu-avatar round sm" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
                            </view> -->
							<view class="text-black text-sm">
								{{item.pickups}}人想领养
							</view>
						</view>
						<button class="cu-btn bg-red xl light" @click="toNav('adopts?post_id='+item.post_id)">查看领养</button>
					</view>

					<view class="padding flex justify-between align-center solid-bottom" v-if="item.type == 2">
						<view class="flex align-center">
							<view class="text-black">捐赠金额</view>
							<view class="text-yellow" >￥{{ item.money }}
							</view>
						</view>
						<button class="cu-btn bg-red xl light" @click="toNav('helps?post_id='+item.post_id)">救助名单</button>
					</view>

					<view class="padding-sm flex flex-direction">
						<button class="cu-btn bg-blue light xl" @click="toNav('/pages/release/form?id='+ item.type + '&post_id='+ encodeURIComponent(JSON.stringify(item)))">编辑</button>
					</view>
					<view class="padding-sm flex flex-direction" @click="onDeletePost(item.post_id)">
						<button class="cu-btn bg-pink light xl">删除</button>
					</view>
				</view>
			</view>

			<!-- 加载 -->
			<view class="cu-load load-modal" v-if="loadModal">
				<!-- <view class="cuIcon-emojifill text-orange"></view> -->
				<image src="/static/logo.png" mode="aspectFit"></image>
				<view class="gray-text">加载中...</view>
			</view>
			<roof></roof>
		</view>
	</view>
</template>

<script>
	import Roof from '../roof/index.vue';
	export default {
		data() {
			return {
				TabCur: 0,
				CustomBar: this.CustomBar,
				scrollLeft: 0,
				navList: [{
					name: '领养',
					page: 1,
					list: [],
					last_page: 1,
					refresh: true
				}, {
					name: '救助',
					page: 1,
					list: [],
					last_page: 1,
					refresh: true

				}, {
					name: '丢失',
					page: 1,
					list: [],
					last_page: 1,
					refresh: true
				}, {
					name: '帮助',
					page: 1,
					list: [],
					last_page: 1,
					refresh: true
				}],
				loadModal: false, //加载
			}
		},
		components: {
			Roof
		},
		onShow() {
			this.getHomeList(true);
			console.log("success")
		},
		onHide() {
			console.log("hehe")
		},
		onLoad() {
			console.log("haha")
		},
		filters: {
			formatDate(time) {
				return time.substring(0, 10)
			}
		},
        onReachBottom() {
            this.getHomeList();
        },
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current;
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.getHomeList();
			},
			toNav(link) {
				uni.navigateTo({
					url: link
				})
			},
			onDeletePost(id) {
				uni.showModal({
					title: '您确定要删除吗',
					success: (re) => {
						if (re.confirm) {
							this.$http.post('deletePost', {
								post_id: id,
							}).then(res => {
								if(res.code == 1){
									uni.showToast({
										title:'删除成功'
									})
									
									this.getHomeList(true);
								}
								console.log(res)
							})
						} else if (re.cancel) {
							console.log('用户点击取消');
						}
					}
				});


				console.log(id)
			},
			getHomeList(reset = false) { //获取列表
				if (reset) {
					this.navList.forEach(e => {
						e.refresh = true;
						e.page = 1;
						e.last_page = 1;
					})
				}
				console.log(1)
				let navIndex = this.navList[this.TabCur];

				console.log(navIndex.last_page, navIndex.page, navIndex.refresh)

				if (this.loadModal) { //防止多次刷新
					return;
				}

				if (navIndex.last_page < navIndex.page && !navIndex.refresh) {
					//最后一页和当前页面相同就不返回
					//refresh为false说明已经不是第一次点进去了,满足2个条件只有一种可能,就是没有下一页了
					uni.showToast({
						title: '没有更多内容',
						icon: 'none'
					})

					return;
				}
				this.loadModal = true;

				this.$http.post('getHomeList', {
					type: this.TabCur * 1 + 1,
					limit: 10,
					page: navIndex.page,
					request_type:2
				}).then(res => {
					navIndex.last_page = res.data.last_page;

					if (navIndex.page <= navIndex.last_page) {
						navIndex.page++;
					}

					if (navIndex.refresh) { //为true表示第一次加载 
						navIndex.list = res.data.data; //把数据直接放进去 还是清空,前面的数据 刷新用
						navIndex.refresh = false;
					} else {

						//不是第一次加载,push进去
						res.data.data.forEach(e => {
							navIndex.list.push(e);
						})
					}

					this.loadModal = false;

					console.log(navIndex, res.data.data)
				})
			}
		}
	}
</script>

<style lang="less" scoped>

</style>